<template>
  <div class="u-page u-general-color">
	<u-navbar :title="title" :custom-back="comeback" :background="background" :border-bottom="false" :title-bold="true" title-color="#040503" back-icon-color="#040503"></u-navbar>
	<div>
		<div class="u-pt-10" @click="cancelBatch">
			<div class="search u-pb-10">
			  <div class="u-flex">
				<div class="search-width3 u-pl-10 u-pr-10">
					<u-search :show-action="false" :clearabled="true" shape="square" bg-color="#fff" :placeholder="placeholderText" v-model="keyword" @search="search"></u-search>
				</div>
			  </div>
			</div>
			<div class="u-pt-5">
				<div class="u-pl-10" v-if="ableSelect">
					<u-checkbox-group @change.stop="checkboxGroupChange">
						<u-checkbox 
							@change.stop="checkboxChange" 
							v-model="item.checked"
							v-for="(item, index) in NotificationList" 
							:key="index"
							:name="item.WF_OrUnid"
						>
							<div class="notification-content" @click.stop="toNoticeDetails(NotificationList[index])">
							  <div class="news-item-select">
								<u-badge :is-dot="true" type="error" :offset="[45,710]" bgColor="#f02323" v-if="item.alreadyRead == 'N'"></u-badge>
								<!-- <div class="u-mb-10 u-pt-5 new-item-title" v-if="item.alreadyRead == 'N'">
									{{item.ShowType}}：
								</div>
								<div class="u-mb-10 u-pt-5 new-item-titleY" v-if="item.alreadyRead == 'Y'">
									{{item.ShowType}}：
								</div> -->
								<div class="u-mb-10 u-pt-5 news-item-content u-line-1" v-if="item.alreadyRead == 'N'">
									{{item.showSubject}}
								</div>
								<div class="u-mb-10 u-pt-5 news-item-contentY u-line-1" v-if="item.alreadyRead == 'Y'">
									{{item.showSubject}}
								</div>
								<div class="u-cl-content">
									{{item.endTime}}
								</div>
							  </div>
							</div>
						</u-checkbox>
					</u-checkbox-group>
				</div>
				<u-swipe-action
					v-for="(item, index) in NotificationList" :key="item.WF_OrUnid" 
					:show="item.show" :index="index" 
					@click="click" @open="open(item)"
					:options="options"
					 v-if="!ableSelect"
				>
					<div class="notification-content title-wrap" @click.stop="toNoticeDetails(NotificationList[index])">
					  <div class="news-item">
						<u-badge :is-dot="true" type="error" :offset="[45,710]" bgColor="#f02323" v-if="item.alreadyRead == 'N'"></u-badge>
						<!-- <div class="u-mb-10 u-pt-5 new-item-title" v-if="item.alreadyRead == 'N'">
							{{item.ShowType}}：
						</div>
						<div class="u-mb-10 u-pt-5 new-item-titleY" v-if="item.alreadyRead == 'Y'">
							{{item.ShowType}}：
						</div> -->
						<div class="u-mb-10 u-pt-5 news-item-content u-line-1" v-if="item.alreadyRead == 'N'">
							{{item.showSubject}}
						</div>
						<div class="u-mb-10 u-pt-5 news-item-contentY u-line-1" v-if="item.alreadyRead == 'Y'">
							{{item.showSubject}}
						</div>
						<div class="u-cl-content">
							{{item.endTime}}
						</div>
					  </div>
					</div>
				</u-swipe-action>
			</div>
		</div>
		  
	</div>
	
  </div>
</template>

<script>

export default {
	
  data() {
    return {
	  placeholderText: '请输入关键字',
      notice: [],
	  NotificationList: [],
      keyword: '',
      pageNum:1,
      pageSize:10,
	  userObj:{},
	  options: [
			{
				text: '未读',
				style: {
					backgroundColor: '#007aff'
				}
			},
			{
				text: '删除',
				style: {
					backgroundColor: '#dd524d'
				}
			}
	  ],
	  ableSelect: false,
	  clickCheckBox: false,
	  delNotices: [],//需要批量删除的消息
	  title: '消息中心',
	  background: {
	  	backgroundColor: '#f3e4e9',
	  },
	  activeStyle: {
		  color: "#303133"
	  },
	  barStyle: {
		  backgroundColor: "#e55e97"
	  },
	  backto: ''
    }
  },

  onShow: function () {
	  
  },

  mounted() {

  },

  onReady() {
	
  },

  onLoad(options) {
    //未登录跳转到登录页面
    this.checkLogin();
	if(this.isNotNull(options.backto)){
		this.backto = options.backto
	}
	this.getNotificationList()
  },
  
  onPullDownRefresh() {
	this.pageNum = 1
	this.getNotificationList()
	// 停止Loading
	uni.stopPullDownRefresh();
  },
  
  onReachBottom() {
	  this.pageNum += 1
	  this.getNotificationList()
  },

  methods: {
	  
	/** 
	 * 返回上一页
	 */
	comeback(){
		if(this.isNotNull(this.backto)){
			uni.reLaunch({url:'/pages/index/incomeIndex'});
		}else{
			this.goBack()
		}
	},

	/**
	 * 获取通知列表
	 */
	 async getNotificationList() {
	  let result = await this.$u.api.unifyMiniRest({
	    systemid: 'comm',
	    url: '/msg/all/list',
	    pageNum: this.pageNum,
	    pageSize: this.pageSize,
	    userid: uni.getStorageSync('userInfo').userId,
	  	searchStr: this.keyword,
	    loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
	  });
	  if (result.code == 200) {
		  if (this.pageNum != 1) {
		    this.NotificationList = this.NotificationList.concat(result.data.list)
		  } else {
		    this.NotificationList = result.data.list
		  }
	  }
	  
	},
	
    clickAll(flag) {
      if (flag == '1') {
        this.$u.route('/pages_tabbar_contact/index_contact/notification')
      } else if (flag == '2') {
        this.$u.route('/pages_tabbar_contact/index_contact/workScenario')
      } else if (flag == '3') {
        this.$u.route('/pages_tabbar_contact/index_contact/jobOpportunities')
      }
    },
	
	// 选中某个复选框时，由checkbox时触发
	checkboxChange(e) {
		console.log(e);
		this.clickCheckBox = true
	},
	// 选中任一checkbox时，由checkbox-group触发
	checkboxGroupChange(e) {
		console.log(e);
		this.clickCheckBox = true
		this.delNotices = e
	},
	
	/**
	 * 消息中心点击批量处理按钮
	 */
	batch(){
		this.ableSelect = true
	},
	
	/**
	 * 点击空白处取消选中
	 */
	cancelBatch(){
		if(this.ableSelect && !this.clickCheckBox){
			this.ableSelect = false
		}
		this.clickCheckBox = false
	},
	
	/**
	 * 跳转到消息详情
	 */
	async toNoticeDetails(item) {
		if(item.alreadyRead == 'N'){//如果该消息为未读的话先设置为已读再跳转
			let result = await this.$u.api.unifyMiniRest({
			  systemid: 'comm',
			  url: '/msg/mark/read',
			  contentType: 'application/x-www-form-urlencoded',
			  msgid: item.id,
			  loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			});
			if(result.code == 200){
				item.alreadyRead = 'Y'
			}
		}
		//判断是否是待办再决定如何跳转
		let result2 = await this.$u.api.unifyMiniRest({
			systemid: 'meily',
			url: '/todo/check/current ',
			contentType: 'application/x-www-form-urlencoded',
			userId: uni.getStorageSync('userInfo').userId,
			taskId: item.id,
			loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		if(result2.data){
			if(item.pagepath.indexOf("pages/index/") == -1){
				this.$u.route(item.pagepath)
			}else{
				uni.reLaunch({url:item.pagepath})
			}
		}else{
			if(item.url.indexOf("pages/index/") == -1){
				this.$u.route(item.url)
			}else{
				uni.reLaunch({url:item.url})
			}
		}
	},
	
	// ========== 滑动操作 start ============
	
	click(index, index1) {
		if(index1 == 1) {//删除
			this.delNotice(index)
		} else {//设置未读
			this.resetReadStatus(index)
		}
	},
	// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
	open(item) {
		this.operationUser = item //记录正在操作的对象
		for(let index in this.NotificationList){
			if(item.docUnid == this.NotificationList[index].docUnid){
				this.NotificationList[index].show = true
			}else{
				this.NotificationList[index].show = false
			}
		}
	},
	
	/**
	 * 删除消息
	 */
	async delNotice(index){
		let result = await this.$u.api.unifyMiniRest({
		  systemid: 'comm',
		  url: '/msg/mark/delete',
		  contentType: 'application/x-www-form-urlencoded',
		  msgid: this.NotificationList[index].id,
		  loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		if(result.code == 200){
			this.showMSG("success",'删除成功')
			this.NotificationList.splice(index, 1)
		}else{
			this.showMSG("error",'删除失败')
		}
	},
	
	/**
	 * 消息设置为未读
	 */
	async resetReadStatus(index){
		let result = await this.$u.api.unifyMiniRest({
		  systemid: 'comm',
		  url: '/msg/mark/unread',
		  contentType: 'application/x-www-form-urlencoded',
		  msgid: this.NotificationList[index].id,
		  loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		if(result.code == 200){
			this.NotificationList[index].alreadyRead = 'N'
			this.NotificationList[index].show = false
		}
	},
	
	// ========== 滑动操作 end ============
	
	/**
	 * 消息中心中的工作通知搜索
	 */
	async search() {
	  this.pageNum = 1
	  let result = await this.$u.api.unifyMiniRest({
	    systemid: 'comm',
	    url: '/msg/all/list',
	    pageNum: this.pageNum,
	    pageSize: this.pageSize,
	    userid: uni.getStorageSync('userInfo').userId,
		searchField: this.keyword,
	    loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
	  });
	  if (result.code == 200) {
	    this.NotificationList = result.data.list
	  }
	},
	
  }

};
</script>

<style lang="scss" scoped>

.content {
  width: 620rpx;
  height: 50rpx;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.notification-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  // padding-bottom: 20rpx;
  // border-bottom: 1rpx #e5e5e5 solid;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.color_gray {
  color: #b2b3b5;
}

.color-blue {
  color: #1989fa;
}

.color-pink {
	color: #e55e97;
}

.detail {
	color: #1989fa;
	font-size: 30rpx;
	font-weight: bold;
}

.box {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    position: relative;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx #e5e5e5 solid;
  }

  li {
    padding-top: 20rpx;
  }

  .topbar {
    font-size: 30rpx;
    font-weight: bold;
    height: 80rpx;
    line-height: 80rpx;
    border-bottom: 1rpx #e5e5e5 solid;
    padding-left: 30rpx;
    padding-right: 30rpx;
    background-color: white;
  }
  
  .topbar3 {
    font-size: 30rpx;
    font-weight: bold;
    height: 85rpx !important;
    border-bottom: 1rpx #e5e5e5 solid;
    padding-left: 30rpx;
    padding-right: 30rpx;
    background-color: white;
  }

  .slot-content {
    font-size: 28rpx;
    color: $u-content-color;
    padding-left: 30rpx;
    padding-bottom: 30rpx;
	text-align: center;
  }

  .notice-title {
    width: 580rpx;
    height: 40rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
  }
.search {
  width: 100%;
  text-align: left;
}
.search-width {
  width: 95%;
  margin: 0 auto;
}

.search-width2-2{
  width: 70%;
  // margin: 0 auto;
}

.search-width3 {
  // width: 600rpx;
  width: 100%;
}

swiper {
		height: 1350rpx !important;
	}
	
.news-item {
	width: 100%;
	padding-left: 8%;
	padding-right: 5%;
	position: relative;
	// background-color: #ffffff;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx #e5e5e5 solid;
  }
  
.news-item-select {
	width: 100%;
	padding-left: 2%;
	padding-right: 5%;
	position: relative;
	// background-color: #ffffff;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx #e5e5e5 solid;
  }
  
.new-item-title{
	font-size: 33rpx;
	font-weight: bold;
	color: #303133;
}

.new-item-titleY{
	font-size: 33rpx;
	font-weight: bold;
	color: #bcbcbc;
}

.news-item-content{
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
	color: #000000;
}

.news-item-contentY {
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
	color: #bcbcbc;
}

.sticky-top{
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1;
}

.flex-space-between{
	  justify-content: space-between;
  }
  
.screen{
	font-size: 30rpx;
    color: #8c8e92;
}

// 弹出层样式
.popup-box{
	height: 300rpx;
}

.popup-item{
	height: 90rpx;
	text-align: center;
	padding-top: 20rpx;
	font-size: 35rpx;
	font-weight: 500;
}

.border-top-small{
	border-top: 0.5rpx #dcdada solid;
}

.bg-color-white{
	background-color: white;
}

</style>